<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>文档对象模型 DOM</title>
		<!-- 
        什么是DOM
        ·DOM，全称DocumentObject Model文档对象模型。
        JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随
        心所欲的操作WEB页面。
        ·文档
        -文档表示的就是整个的HTML网页文档
        ·对象
        -对象表示将网页中的每一个部分都转换为了一个对象。
        模型
        -使用模型来表示对象之间的关系，这样方便我们获取对象。

        节点
        节点Node，是构成我们网页的最基本的组成部分，网页中的
        每一个部分都可以称为是一个节点。
        比如:html标签、属性、文本、注释、整个文档等都是一个节点。
        虽然都是节点，但是实际上他们的具体类型是不同的。
        。比如:标签我们称为元素节点、属性称为属性节点、文本称为
        文本节点、文档称为文档节点。
        节点的类型不同，属性和方法也都不尽相同。
        节点
        节点:Node--构成HTML文档最基本的单元。·常用节点分为四类
        -文档节点:整个HTML文档
        元麦节点:HTML文档中的HTML标签
        属性节点:元素的属性 
        文本节点:HTML标签中的文本内容
        
        节点的属性
                  nodeName   nodeType nodeValue 
        文档节点   #document     9       null 
        元素节点   标签名         1       null 
        属性节点   属性名         2       属性值 
        文本节点   #text         3      ★文本内容
     -->
		<!-- 
        获取元素节点
        通过document对象调用
        1.getElementById()
            -通过id属性获取一个元素节点对象
        2.getElementsByTagName()
            -通过标签名获取一组元素节点对象
        3.getElementsByName()
            -通过name属性获取一组元素节点对象

        获取元素节点的子节点通过具体的元素节点调用
        1.getElementsByTagName()
        一方法，返回当前节点的指定标签名后代节点
        2.childNodes
        一属性，表示当前节点的所有子节点
        3.firstChild
        一属性，表示当前节点的第一个子节点
        4.lastChild
        一属性，表示当前节点的最后一个子节点

        获取父节点和兄弟节点通过具体的节点调用 
        1.parentNode
        -属性，表示当前节点的父节点
        2.previousSibling
        -属性，表示当前节点的前一个兄弟节点
        3.nextSibling
        一属性，表示当前节点的后一个兄弟节点
     -->
	</head>
	<body>

		<button id="btn">click</button>
		<script>
			// 浏览器已经为我们提供文档节点 对象这个对象是window属性可以在页面中直接使用
			// 文档节点代表的是整个网页  
			console.log(document);
			//获取到button对象
			var btn = document.getElementById("btn");
			//修改按钮的文字
			btn.innerHTML = "I'm Button";
		</script>
	</body>
</html>
